import {
  Form,
  DatePicker,
  TimePicker,
  Button,
  Input,
  Icon,
  Select,
  Upload,
  message,
} from 'antd';
import { connect } from 'dva';
import { creator } from '@/utils/creator';
import AliyunOSSUpload from '@/utils/AliyunOSSUpload';
import React from 'react';
const { Item } = Form;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;

class TimeRelatedForm extends React.Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(creator('category/getCats'));
  }
  save = e => {
    e.preventDefault();
    const {dispatch}=this.props
    this.props.form.validateFields(async(err, values) => {

      if(err){
        return
      }
      values.categoryId=values.category.split('-')[0]
      values.categoryName=values.category.split('-')[1]
      values.mainPics= values.mainPics.map(item=>item.url)
      values.detailPics= values.detailPics.map(item=>item.url)
      const res=await dispatch(creator('category/goodsAdd',values))
      if(res.httpStatus===200){
        message.success(res.msg)
        this.props.form.resetFields()
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { categoryList } = this.props.category;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Item label="品名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="品类">
          {getFieldDecorator('category', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Select>
              {categoryList.map(item => (
                <Option key={item.id} value={`${item.id}-${item.name}`}>{item.name}</Option>
              ))}
            </Select>,
          )}
        </Item>
        <Item label="主图">
          {getFieldDecorator('mainPics', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<AliyunOSSUpload />)}
        </Item>
        <Item label="详情">
          {getFieldDecorator('detailPics', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<AliyunOSSUpload />)}
        </Item>
        <Item label="成本价">
          {getFieldDecorator('costPrice', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="原价">
          {getFieldDecorator('originPrice', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="销售价">
          {getFieldDecorator('salePrice', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="重量">
          {getFieldDecorator('weight', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="保质期">
          {getFieldDecorator('expDate', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="发货地">
          {getFieldDecorator('place', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(<Input />)}
        </Item>
        <Item label="备注">
          {getFieldDecorator('remark')(<Input />)}
        </Item>
        <Item style={{ textAlign: 'center' }}>
          <Button onClick={this.save}>保存</Button>
        </Item>
      </Form>
    );
  }
}

const WrappedTimeRelatedForm = Form.create({ name: 'time_related_controls' })(
  TimeRelatedForm,
);

export default connect(({ category }) => ({ category }))(
  WrappedTimeRelatedForm,
);
